<template>
    <div>
        <page-container 
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template v-slot:content>
                <!-- <mask-image :url="backImage" :height="500"></mask-image> -->
                <div class="body-main">
                    <div class="contact-main">
                        <div class="contact-left">
                            <div class="contact-left-main">
                                <el-form ref="cobtact" :model="contact" :rules="rules">
                                    <el-form-item class="input-deep" prop="name">
                                        <el-input placeholder="你的姓名" v-model="contact.name"/>
                                    </el-form-item >
                                    <el-form-item class="input-deep" prop="email">
                                        <el-input placeholder="你的邮箱" v-model="contact.email"/>
                                    </el-form-item >
                                    <el-form-item class="input-deep" prop="message">
                                        <el-input type="textarea" placeholder="你想说的话" v-model="contact.message"/>
                                    </el-form-item>
                                    <el-form-item class="btn-deep">
                                        <el-button @click="submit('cobtact')">确定提交</el-button>
                                    </el-form-item>
                                </el-form>

                            </div>
                            
                        </div>

                        <div class="contact-right">
                            <div class="contact-right-main">
                                <amap :zoom="15" :center="position">
                                    <amap-marker
                                        :position="position"
                                        :label="{
                                        content: '江西财经大学(蛟桥园校区)',
                                        direction: 'bottom',
                                        }"
                                        draggable
                                    />
                                </amap>
                                <!-- <div style="width: 60%;font-size: 40px;font-weight: 600;">万象技术栈</div> -->
                            </div>
                        </div>
                    </div>
                    
                </div>
            </template>
        </page-container>
        
    </div>
</template>

<script>
import PageContainer from '@/components/container/page-container/PageContainer'
import MaskImage from '@/components/plugs/mask-image/MaskImage';

export default {

    data(){
        let checkEmail = (rule, value, callback)=>{
            let check = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
            if(check.test(value)){
                return callback();
            }
            return callback(new Error('电子邮箱格式不合法'));
            
        };
        return{
            pageConfig:{
                header:{
                    regular:false,
                    ceiling:true,
                    background:'#1E171F',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            backImage:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-about.jpg',
            contact:{},
            rules:{
                name:[
                    { required: true, message: '请输入你的名字', trigger: 'blur' },
                    { min: 2, max: 36, message: '长度在 2 到 36 个字符', trigger: 'blur' }

                ],
                email:[
                    { required: true, message: '请输入你的邮箱', trigger: 'blur' },
                    { validator: checkEmail, trigger: 'blur' }
                ],
                message:[
                    { required: true, message: '请输入你想要说的话', trigger: 'blur' },
                    { min: 5, max: 500, message: '长度在 2 到 36 个字符', trigger: 'blur' }
                ]
            },
            position:[115.855101, 28.744291]
        }
    },
    methods:{
        submit(ref){
            this.$refs[ref].validate((valid)=>{
                if(valid){
                    console.log('校验通过~');
                }else{
                    this.$message.warning('输入内容不合法,请检查~');
                }
            })
        }

    },
    components:{
        'page-container':PageContainer,
        'mask-image':MaskImage
    }

}
</script>

<style  scoped>
.body-main{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.contact-main{
    width: 1000PX;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdfe6;
    height: 450px;
    animation: fadeInLeft 1s;
}
.contact-left , .contact-right{
    width: 100%;
}
.contact-left{
    display: flex;
    /* align-items: center; */
    height: 450px;
    
}
.contact-right{
    
    height: 100%;
    

}
.contact-left-main>>>form{
    width: 70%;
}
.contact-right-main , .contact-left-main{
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: 450px;
}
.btn-deep >>>button{
    border-radius: 0;
    background-color: #FF6900;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}
.input-deep>>>input{
    border: 1px solid #dcdfe6;
    border-radius: 0;

}
.input-deep>>>textarea{
    height: 140px;
    resize:none;
    border: 1px solid #dcdfe6;
    border-radius: 0;
}

</style>